<template>
    <el-card class="m-8">
        <section slot="header" class="mb-4 flex items-center justify-between">
            <div>
                <el-button class="mr-4" type="primary" @click="handleAdd">新增</el-button>
            </div>
                
            <!-- <div class="flex items-center justify-between">
                <span class="mr-4 block">礼物名称：</span>
                <el-input class="mr-4 input" v-model="listQuery.search" placeholder="请输入礼物名称"></el-input>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
            </div> -->
        </section>
  
        <el-table :data="tableList" align="center" border class="mt-4" stripe>
            <el-table-column label="序号" prop="id"/>
            <el-table-column label="上榜单价值" prop="list_amount" />
            <el-table-column label="黄金宝箱财富等级限制" prop="gold_level" />
            <el-table-column label="开始时间" prop="start_at"/>
            <el-table-column label="结束时间" prop="end_at"/>
            <el-table-column label="是否开启" prop="is_open">
            <template slot-scope="scoped">
              <el-tag v-if="scoped.row.is_open === 1" type="success" size="normal"  effect="dark">
                开启
              </el-tag>
              <el-tag v-else type="warning" size="normal"  effect="dark">
                关闭
              </el-tag>
            </template>
            </el-table-column>
            
            <el-table-column align="center" label="操作" width="300">
                <template slot-scope="{row}">
                    <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
  
        <cus-pagination
            :limit.sync="listQuery.perPage"
            :page.sync="listQuery.page"
            :total="total"
            @pagination="initData"
        />
  
        <!-- 添加 -->
        <el-dialog
            :close-on-click-modal="false"
            :visible="addDialog2"
            lock-scroll
            :title="title"
            width="30%"
            @close="closeAddDialog2"
        >
                <el-form :model="form" ref="form" :rules="rules" label-width="180px" :inline="false" size="normal">
                    <el-form-item label="上榜单价值" prop="list_amount">
                        <el-input v-model="form.list_amount"></el-input>
                    </el-form-item>
                    <el-form-item label="黄金宝箱财富等级限制" prop="gold_level">
                        <el-input v-model="form.gold_level"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="start_at">
                      <el-date-picker
                        v-model="form.start_at"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择开始时间"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="end_at">
                      <el-date-picker
                        v-model="form.end_at"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="请选择结束时间"
                      ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否开启" prop="is_open">
                      <el-radio-group v-model="form.is_open">
                          <el-radio :label="1">开启</el-radio>
                          <el-radio :label="0">关闭</el-radio>
                      </el-radio-group>
                    </el-form-item>
                </el-form>
        
                <section slot="footer">
                    <el-button @click="addDialog2 = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit(row)">确定</el-button>
                </section>
        </el-dialog>
  
    </el-card>
</template>

<script>
  import {
    yearMidSettingList,
    yearMidSettingSave,
  } from '@/api/feedbackActivity'
  
  export default {
    data() {
      return {
        title: '新增',
        dialogVisible: true,
        selectData: '',
        options: [
            {
              value: 1,
              label: '礼物'
            },
            {
              value: 2,
              label: '装扮'
            }
        ],
        tableList: [],
        user_code: '',
        listQuery: {
          page: 1,
          perPage: 10,
        },
        meta: {
          page: 1,
          perPage: 10
  
        },
        total: 0,
        /* 弹出框开关 */
        addDialog2: false,
        id: '',
        form: {
          id: undefined,
          end_at: undefined,
          start_at: undefined,
          gold_level: undefined,
          list_amount: undefined,
          is_open: 1
        },
        rules: {
          list_amount: [{ required: true, message: '请输入', trigger: 'blur' }],
          gold_level: [{ required: true, message: '请输入', trigger: 'blur' }],
          start_at: [{ required: true, message: '请选择', trigger: 'blur' }],
          end_at: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
      }
    },
    created() {
      this.initData()
    },
    methods: {
      handleAdd() {
        this.title = '新增'
        this.addDialog2 = true
      },
      handleEdit(row) {
        this.title = '编辑'
        this.form = JSON.parse(JSON.stringify(row))
        this.addDialog2 = true
      },
      handleSearch() {
        this.listQuery.page = 1
        this.initData()
      },
      handleReset() {
        this.listQuery = {
          user_code: '',
          nickname: '',
          page: 1,
          perPage: 10,
        }
        this.initData()
      },
      async initData() {
        try {
          for (let key in this.listQuery) {
            this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key]
          }
          const { data } = await yearMidSettingList(this.listQuery)
          this.listQuery.page = data.meta.page
          this.total = data.meta.total
          this.tableList = data.list
        } catch (e) {
          console.error(e)
        }
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除合成礼物, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { code, data} = await magicDel({
            id: row.id
          })
          if(code === 200) {
  
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      onSubmit() {
        this.$refs['form'].validate(valid => {
            if (valid) {
              this.form.pool_id = this.$route.query.id
              yearMidSettingSave(this.form).then(res => {
                if(res.code === 200) {
                  this.initData()
                  this.addDialog2 = false
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                }
              })
                
            } else {
                return false
            }
        })
        
      },
      closeAddDialog2() {
        this.addDialog2 = false
        if (this.$refs['form']) {
            this.$refs['form'].clearValidate() // 清除整个表单的校验
            this.$refs['form'].resetFields() // 清除整个表单的校验
        }
        this.form = {
          id: undefined,
          end_at: undefined,
          start_at: undefined,
          gold_level: undefined,
          list_amount: undefined,
          is_open: 1
        }
      },
    }
  }
</script>
  
<style scoped>
  .imageStyle {
    width: 150px;
  }

  .input{
    width: 200px;
  }
</style>
  